<template>
  <div>
    <div>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="关键字" >
          <el-input
            style="width: 322px;"
            clearable
            placeholder="手机号/内容/@用户名"
            prefix-icon="el-icon-search"
            v-model="queryForm.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="_getMailList">查询</el-button>
          <el-button type="danger" icon="el-icon-close"  @click="confirm('delmany')">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="mainList"
        stripe
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="info_content"
          label="内容"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="user_name"
          label="用户"
        >
        </el-table-column>
        <el-table-column
          prop="mobilenum"
          label="电话"
          width="150"
        >
        </el-table-column>
        <el-table-column
          label="发布时间"
        >
          <template slot-scope="scope">
            {{scope.row.init_time | formatDate('yyyy-MM-dd hh:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="view_count"
          label="浏览量"
        >
        </el-table-column>
        <el-table-column
          prop="comment_count"
          label="评论数"
        >
        </el-table-column>
        <el-table-column
          prop="like_count"
          label="点赞数"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="getDetail(scope.row)"><i class="iconfont icon-1202youjiantou"></i>详情</el-button>
            <el-button type="text" @click="confirm('del', scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="prev, pager, next"
        :current-page.sync="page.curpage"
        @current-change="_getMailList"
        :total="page.total">
      </el-pagination>
    </div>
    <DetailModal2
      @getMoreChild="getMoreChild" 
      @getMore="getMore"
      :full-show.sync="fullShow" 
      :detailObj="detailObj" 
      :commentData="commentData" 
      :hasMorePage="hasMorePage">
    </DetailModal2>

  </div>
</template>

<script>
import {getDynamicList, del, getDetail} from 'api/dynamicManagementAPI'
import {getDetailCommentList, getDetailHFCommentList} from 'api/commentManagementAPI'
import DetailModal2 from 'components/detailModal/detailModal2'
export default {
  components: {
    DetailModal2
  },
  data() {
    return {
      fullShow: false,
      queryForm: {},
      detailObj: {},
      mainList: [],
      page: {
          curpage: 1,
          total: 1
      },
      commentpage: {
        curpage: 1,
        total: 1
      },
      commentData: []
    }
  },
  computed: {
    hasMorePage() {
      return this.commentpage.total > this.commentpage.curpage
    }
  },
  methods: {
    getMoreChild(index) {
      let data = this.commentData[index]
      getDetailHFCommentList(++data.childpage, {info_id: data.info_id, parent_id: data.comment_id}).then(res => {
        data.childpage += 1
        data.hf_comments = [...data.hf_comments, ...res.rData]
      })
    },
    getMore() {
      this.commentpage.curpage += 1
      console.log(this.commentpage.curpage)
      getDetailCommentList(this.commentpage.curpage, {info_id: this.commentData[0].info_id}).then(res => {
        console.log(res)
        this.commentpage.total = res.pageInfo.Total
        // 加个当前也
        res.rData.forEach(item => {
          item.childpage = 1
        })
        this.commentData = this.commentData.push(res.rData)
      })
    },
    handleSelectionChange(rows){
      this.delArr = rows.map(row => {
        return {info_id: row.info_id, category_id: row.category_id}
      })
    },
    getDetail(row){
      this.commentpage.curpage = 1
      let info_id = row.info_id
      this.fullShow = true
      getDetail({info_id}).then(res => {
        this.detailObj = res.rData[0]
      })
      getDetailCommentList(this.commentpage.curpage, {info_id: this.commentData[0].info_id}).then(res => {
        console.log(res)
        this.commentpage.total = res.pageInfo.Total
        // 加个当前也
        res.rData.forEach(item => {
          item.childpage = 1
        })
        this.commentData = this.commentData.push(res.rData)
      })
    },
    // 获取
    _getMailList(){
      let data = JSON.parse(JSON.stringify(this.queryForm))
      getDynamicList(this.page.curpage, data).then(res => {
        this.page.total = res.pageInfo.Total
        this.mainList = res.rData
      })
    },
    confirm(type, row) {
      this.$confirm('是否确认进行此操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(type === 'del') {
          this.oneDel(row)
        }else if(type === 'delmany'){
          this.manyDel()
        }
      })
    },
    _caozuoAfter(res){
      this.$message({
        message: res.rMsg,
        type: 'success'
      })
      this.page.curpage = 1
      this._getMailList()
    },
    oneDel(row) {
      let data = {
        info_id: row.info_id,
        category_id: row.category_id
      }
      del(data).then( res => {
        if(res) {
          this._caozuoAfter(res)
        }
      })
    },
    
    manyDel() {
      if(!this.delArr.length){
        this.$message({
          message: '还未选择要删除的选项',
          type: 'error'
        })
        return 
      }
      let data = {
        info_ids: this.delArr
      }
      del(data).then( res => {
        if(res) {
          this._caozuoAfter(res)
        }
      })
    }
  },
  created() {
    if(this.$route.params.name){
      this.queryForm.query_value = '@'+this.$route.params.name
    }
    this._getMailList()
  }
}
</script>
